<!-- 我的-订单-详情 -->
<script setup>
	import {
		reactive,
		computed,
		ref,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'

	import {
		getOrderInfoApi
	} from '@/api/my/order.js'

	// 全局页面数据
	const data = reactive({
		barHeight: 0,
		navHeight: 0,
		msgNum: 2
	})

	const ordId = ref()
	onLoad((option) => {

		console.log('option----====---: ', option);

		ordId.value = option.ordId

		getOrderInfo()


		//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
		let {
			statusBarHeight
		} = uni.getSystemInfoSync()
		data.barHeight = statusBarHeight
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		data.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
		// this.getList()
	})

	const OrderInfo = ref({
		ordItemList: []
	})

	const getOrderInfo = async () => {
		const {
			data
		} = await getOrderInfoApi({
			ordId: ordId.value,
		})
		OrderInfo.value = data
		console.log('data: 1111111111', data);
	}

	const tip = computed(() => {
		return `感谢您对透氧的信任，期待再次光临。`
	})
	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
	// 点击评价
	const evaluateClick = () => {
		console.log('====');
		uni.navigateTo({
			url: '/subPackage/my/order/evaluate'
		})
	}
</script>

<template>
	<view class="order-detail-page">
		<!-- 背景图片 -->
		<image src="/static/images/my/head_bg.png" style="width: 100vw;height: 626rpx;" mode="widthFix" class="bg-img">
		</image>
		<!-- 头部内容 -->
		<view class="head-box" :style="{ 'padding-top': data.barHeight + 'px' }">
			<!-- navbar -->
			<view class="navbar" :style="{ 'height': data.navHeight + 'px' }">
				<view class="back-box" @click="goBack">
					<up-icon name="arrow-left" color="#303133" size="20"></up-icon>
				</view>
				<text>订单详情</text>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="content-box" v-for="item in OrderInfo.ordItemList" :key="item.ordId">
			<!-- 状态展示 -->
			<view class="status-box">
				<up-icon v-if="false" name="clock" size="20" color="#303133"></up-icon>
				<up-icon name="checkmark-circle" size="20" color="#303133"></up-icon>
				<text v-if="OrderInfo.status==='1'">待付款</text>
				<text v-if="OrderInfo.status==='2'">待使用</text>
				<text v-if="OrderInfo.status==='3'">已使用</text>
				<text v-if="OrderInfo.status==='4'">已退款</text>
				<text v-if="OrderInfo.status==='5'">待评价</text>
				<text v-if="OrderInfo.status==='6'">已评价</text>
				<text v-if="OrderInfo.status==='7'">已取消</text>
				<text v-if="OrderInfo.status==='8'">退款中</text>
				<text v-if="OrderInfo.status==='9'">已完成</text>
				<text v-if="OrderInfo.status==='10'">待接单</text>
			</view>
			<!-- tip -->
			<view class="tip">{{ tip }}</view>
			<!-- 订单支付信息 -->
			<view class="order-pay-info">
				<!-- 门店位置 -->
				<view class="address-box">
					<image style="width: 24rpx; height: 24rpx;" src="/static/images/icons/icon_shop.png"
						mode="scaleToFill" />
					<text>明发新城中心A1栋 · 3006号（南京工业大学地铁)</text>
				</view>
				<!-- 场地信息 -->
				<view class="field-box">
					<view class="pic-box">
						<image :src="item.prodMainPic" style="width: 196rpx;height: 196rpx;" />
					</view>
					<view class="info">
						<view class="name">{{OrderInfo.shopName}}</view>
						<view class="type">{{item.prodName}}</view>
						<view class="time">下单时间:{{item.createTime}}</view>
					</view>
				</view>
				<!-- 价格信息 -->
				<view class="info-list">
					<view class="item">
						<text class="label">场地金额：</text>
						<text class="value">¥69</text>
					</view>
					<view class="item">
						<text class="label">教练金额：</text>
						<text class="value">¥100</text>
					</view>
					<view class="item">
						<text class="label">氧气补贴：</text>
						<text class="value" style="color: #FF0F00;">-¥59.1</text>
					</view>
					<view class="line"></view>
					<view class="item total">
						<text class="label">实际退款</text>
						<text class="value">¥109.9</text>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order-info">
				<view class="title">订单信息</view>
				<view class="info-list">
					<view class="item">
						<text class="label">下单时间：</text>
						<text class="value">2024-09-06 13:22:32</text>
					</view>
					<view class="item">
						<text class="label">下单项目：</text>
						<text class="value">TouY运动室</text>
					</view>
					<view class="item">
						<text class="label">订单号码：</text>
						<text class="value">2314 2938 4728 1039 2984 32</text>
					</view>
					<view class="item">
						<text class="label">预约教练：</text>
						<text class="value">有</text>
					</view>
					<view class="item">
						<text class="label">支付方式：</text>
						<text class="value">在线支付 </text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部栏 -->
		<view class="bottom-bar">
			<view class="content">
				<up-button v-if="false" class="evaluate" text="评价" type="primary" :hairline="false" color="#D9D9D9"
					shape="circle" :plain="true"></up-button>
				<up-button v-if="false" class="again" text="再次预约" type="primary" :hairline="false" color="#303133"
					shape="circle" :plain="true"></up-button>
				<!-- <up-button v-if="true" text="修改地址" type="primary" :plain="true"></up-button>
        <up-button v-if="false" text="确认收货" type="primary" :plain="true"></up-button> -->
				<up-button v-if="true" text="去评价" type="primary" :plain="true" @click="evaluateClick"></up-button>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.order-detail-page {
		min-height: 100vh;
		background: #F6F6F6;

		// 背景图片 
		& .bg-img {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		// 头部内容
		& .head-box {
			position: relative;
			z-index: 2;

			& .navbar {
				display: flex;
				align-items: center;
				justify-content: center;

				& .back-box {
					position: absolute;
					left: 24rpx;
				}
			}
		}

		// 内容区域
		& .content-box {
			position: relative;
			z-index: 2;
			padding: 46rpx 32rpx;

			// 状态展示
			& .status-box {
				display: flex;
				align-items: center;

				&::v-deep .up-icon {
					& text {
						line-height: normal;
					}
				}

				& text {
					margin-left: 16rpx;
					font-weight: 500;
					font-size: 40rpx;
					color: #303133;
				}
			}

			// tip
			& .tip {
				margin-top: 16rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #303133;
			}

			// 订单支付信息
			& .order-pay-info {
				margin-top: 24rpx;
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx;

				// 位置
				& .address-box {
					display: flex;
					align-items: center;

					&::v-deep .up-icon {
						& text {
							line-height: normal;
						}
					}

					& text {
						margin-left: 4rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #838385;
					}
				}

				// 场地信息
				& .field-box {
					margin-top: 24rpx;
					display: flex;

					& .pic-box {
						border-radius: 24rpx;
						overflow: hidden;
					}

					& .info {
						margin-left: 20rpx;

						& .name {
							font-weight: 500;
							font-size: 28rpx;
							color: #303133;
						}

						& .type {
							margin-top: 4rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #B7B7B7;
						}

						& .time {
							margin-top: 4rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #B7B7B7;
						}
					}
				}

				// 价格信息
				& .info-list {
					margin-top: 32rpx;

					& .item {
						margin-bottom: 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						& .label {
							font-weight: 400;
							font-size: 28rpx;
							color: #838385;
						}

						& .value {
							font-weight: 500;
							font-size: 28rpx;
							color: #303133;
						}

						&.total {
							margin-bottom: 0;
							margin-top: 32rpx;

							& .value {
								font-weight: 500;
								font-size: 40rpx;
								background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
								background-clip: text;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
							}
						}
					}

					& .line {
						// width: 622rpx;
						height: 0rpx;
						border: 2rpx solid;
						opacity: 0.5;
						border-image: linear-gradient(270deg, rgba(217, 217, 217, 0), rgba(217, 217, 217, 1), rgba(217, 217, 217, 0)) 2 2;
					}
				}
			}

			// 订单信息
			& .order-info {
				margin-top: 20rpx;
				padding: 28rpx 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx;

				& .title {
					font-weight: 600;
					font-size: 32rpx;
					color: #303133;
				}

				& .info-list {
					padding-top: 12rpx;
					padding-bottom: 8rpx;

					& .item {
						margin-top: 12rpx;
						display: flex;
						align-items: center;

						& .label {
							font-weight: 400;
							font-size: 24rpx;
							color: #838385;
						}

						& .value {
							font-weight: 400;
							font-size: 24rpx;
							color: #303133;
						}
					}
				}
			}
		}

		// 底部栏
		& .bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			width: 750rpx;
			height: 158rpx;
			background: #FFFFFF;
			border: 1rpx solid #E9E9EB;

			& .content {
				padding: 12rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				&::v-deep .u-button {
					margin-right: 0;
					margin-left: 16rpx;
					width: 204rpx;
				}
			}
		}
	}
</style>